<style>

	#foo-container {
		top: 50px;
		left: 450px;
		position: absolute;
	}
	#foo {
		width: 200px;
		height: 200px;
		border: 2px solid black;
		padding: 10px;
	}

	.blackText {
		color: #000;
	}
	.blueText {
		color: #00f;
	}
	#logContaner {
		position: absolute;
		left: 450px;
		top: 280px;
	}
	#hidden_foo {
		display: none;
		width: 200px;
		height: 40px;
		border: 2px solid black;
		padding: 10px;
		margin-top: 10px;
	}
</style>

<div id="foo-container">
	<div id="foo" class="blackText">
	This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text.
	</div>
	<div id="hidden_foo">I am hidden by CSS.</div>
</div>
<div id="logContaner" class="blueText"></div>
<script src="/depender/build?require=More/Element.Shortcuts,Core/Element.Event"></script>
<script>
var log = function(msg){
	$('logContaner').adopt(new Element('p', {text: msg}));
};
var reset = function(element){
	element.eliminate('element:_originalDisplay');
};
makeActions([
	{
		title: "Element.hide",
		description: "Switches an element from display:block|inline|etc to display:none",
		fn: function(){
			$('foo').setStyle('display','block');
			$('foo').hide();
		}
	},
	{
		title: "Element.show",
		description: "Switches an element from display:none to display:block",
		fn: function(){
			$('foo').setStyle('display','none');
			$('foo').show();
		}
	},
	{
		title: "Element.hide twice",
		description: "Hides an element twice and then shows it after a pause",
		fn: function(){
			$('foo').show();
			reset($('foo'));
			$('foo').hide();
			$('foo').hide();
			(function(){
				$('foo').show();
			}).delay(250);
		}
	},
	{
		title: "Element.show: show an element hidden by css",
		description: "Takes an element with a css class that has a display:none definition and shows it to display:block.",
		fn: function(){
			$('hidden_foo').show();
		}
	},
	{
		title: "Element.show(type)",
		description: "Switches an element from display:none to display:inline. (It switches back after a second.)",
		fn: function(){
			$('foo').hide();
			$('foo').show('inline');
			(function(){
				$('foo').setStyle('display', 'block');
			}).delay(1000);
		}
	},
	{
		title: "Element.toggle",
		description: "Toggles between display:none and block.",
		fn: function(){
			$('foo').toggle();
		}
	},
	{
		title: "Element.isDisplayed",
		description: "Returns true if the element's display is not = none. (See log message displayed below after you click).",
		fn: function(){
			$('foo').hide();
			if (!$('foo').isDisplayed()){
				log('hide successful; foo is not visible');
			} else {
				log('either hide or isDisplayed failed');
				$('foo').visTest = false;
			}
			$('foo').show();
			$('foo').visTest = false;
			if ($('foo').isDisplayed()){
				log('show successful; foo is visible');
				$('foo').visTest = true;
			} else {
				log('either show or isDisplayed failed');
				$('foo').visTest = false;
			}
		}
	},
	{
		title: "Element.isVisible",
		description: "Returns true if the element is visible. (See log message displayed below after you click).",
		fn: function(){
			$('foo-container').hide();
			if (!$('foo').isVisible()){
				log('hide successful; foo is not visible');
			} else {
				log('either hide or isDisplayed failed');
			}
			$('foo-container').show();
			if ($('foo').isVisible()){
				log('show successful; foo is visible');
			} else {
				log('either show or isDisplayed failed');
			}
		}
	},
	{
		title: 'Element.swapClass (blue)',
		description: "Changes the text from black to blue.",
		fn: function(){
			$('foo').show();
			$('foo').swapClass('blackText', 'blueText');
		}
	},
	{
		title: 'Element.swapClass (black)',
		description: "Changes the text from blue to black.",
		fn: function(){
			$('foo').show();
			$('foo').swapClass('blueText', 'blackText');
		}
	},
	{
		title: 'Document.clearSelection',
		description: 'Run this function. You have 3 seconds to select some text. Then it should clear the selection',
		fn: function(){
			document.clearSelection.delay(3000, document);
		}
	}
]);

</script>
